<template>
  <div class="container" v-if="record">
    <van-nav-bar title="商品详情" left-arrow @click-left="goBack" />
    <van-swipe lazy-render>
      <van-swipe-item v-for="image in record.banners" :key="image">
        <img :src="image" class="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="nameContainer">
      <div class="name">{{ record.name }}</div>
      <div class="text">{{ record.text }}</div>
      <div class="priceContainer">
        <div class="price">¥{{ record.price }}</div>
        <div class="originPrice">¥{{ record.originPrice }}</div>
        <div class="unit">{{ record.unit }}</div>
      </div>
    </div>
    <div class="row">
      <div></div>
      <div class="buttons">
        <van-stepper v-model="record.count" :min="1" :max="99" integer theme="round" button-size="22" disable-input />
        <van-button style="margin:0 10px" size="mini" @click.stop="addCart(record)">加入购入车</van-button>
        <van-button size="mini" @click.stop="createOrder(record)">立即购买</van-button>
      </div>
    </div>
    <div class="detailContainer">
      <img v-for="image in record.imageList" :key="image" :src="image" class="image" />
    </div>
  </div>
</template>

<script>
import { showDialog } from 'vant';
export default {
  data() {
    return {
      record: null
    }
  },
  async activated() {
    const { id } = this.$route.query;
    const data = await post('/detail/goods', { id });
    if (data.success) {
      this.record = data.result;
    }
  },
  methods: {
    goBack() {
      this.record = null;
      this.$router.back();
    },
    async addCart(item) {
      const data = await post('/create/cart', {
        goodsId: item.id,
        count: item.count,
      });
      if (!data.success) {
        return showDialog({ message: data.message });
      }
      showDialog({ message: '加入购入车成功' });
    },
    async createOrder(item) {
      app.push('/createOrder', item);
    },
  }
}
</script>

<style scoped lang="less">
.container {
  width: 375px;
  padding-bottom: 200px;
  overflow-x: hidden;
}
.image {
  width: 375px;
}
.nameContainer {
  height: 100px;
  width: 375px;
  margin: 10px;
}
.name {
  font-size: 18px;
}
.text {
  font-size: 12px;
  color: gray;
  margin: 10px 0;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 20px;
}
.priceContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.price {
  font-size: 24px;
  color: red;
}
.originPrice {
  text-decoration: line-through;
  color: rgb(164, 163, 163);
  margin: 0 10px;
}
.detailContainer {
  display: flex;
  flex-direction: column;
}
.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
}
</style>
